<template>
  <div class="request-party-service-manage">
    <div class="app-container">
      <div class="mainbox">
        <Header :header-name="$route.meta.title" />

        <div class="request-party-service-manage-body">

          <!-- 搜索板块 -->
          <el-form ref="form" :model="form" inline label-width="80px" class="search-form">
            <el-form-item prop="systemId">
              <el-select v-model="form.systemId" clearable placeholder="请选择系统名称">
                <el-option
                  v-for="(item, index) in systemIdList"
                  :key="index"
                  :label="item.systemCode + ' / ' + item.systemName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item prop="encryptDecryptName">
              <el-input v-model="form.encryptDecryptName" clearable :maxlength="100" placeholder="请输入加解密名称" />
            </el-form-item>

            <el-form-item prop="method">
              <el-select v-model="form.method" clearable placeholder="请选择加解密方式">
                <el-option
                  v-for="(item, index) in dictOptions.encryptMethod"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item class="query-action">
              <el-button type="primary" :loading="loading" :disabled="loading" @click="searchBtn"> 查询 </el-button>
              <el-button :loading="loading" :disabled="loading" @click="resetBtn"> 重置 </el-button>
              <el-button type="primary" @click="EAndDBtn"> 新增 </el-button>
              <el-button type="danger" :disabled="multipleSelection.length === 0" @click="delBtn()"> 删除 </el-button>
            </el-form-item>
          </el-form>

          <!-- 表格数据视图 -->
          <div v-if="!showTreeView">
            <FlexTable
              v-loading="loading"
              border
              :data="tableData"
              :columns="columnsOptions"
              @selection-change="handleSelectionChange"
            />

            <el-pagination
              :page-size="pagination.pageSize"
              :current-page.sync="pagination.pageNo"
              layout="prev, pager, next, jumper"
              :total="pagination.totalPage"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>

        </div>
        <addEncPti ref="addEncPtiRef" @getList="getTableData()" />
      </div>
    </div>
  </div>
</template>

<script>
import { encDecDetail, encDecPage } from '@/api/encryptionDecryptionConfigurations'
import addEncPti from '@/views/encryptionDecryptionConfigurations/components/AddEncPti.vue'
import dictMixin from '@/utils/mixins/dict'
import { EAndDDeleteApi } from '@/api/serviceManage/requestPartyServiceManage'
import { getSystemListApi } from '@/api/serviceManage/requestPartyServiceManage'
export default {
  name: 'EncryptionDecryptionConfigurations',
  components: { addEncPti },
  mixins: [
    dictMixin(['sts@Local', 'interface_type', 'interfaceUpStatus', 'encryptMethod'])
  ],

  props: {
    // 服务管理分类 1-请求放服务、2-提供方服务
    manageType: {
      type: Number,
      default: 1
    }
  },

  data () {
    return {
      treeLoading: false,
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'systemName'
      },
      showTreeView: false,
      loading: false,
      tableData: [],
      columnsOptions: [
        { type: 'selection' },
        { label: '系统名称', prop: 'systemName' },
        { label: '加解密名称', prop: 'encryptDecryptName' },
        { label: '加解密方法', prop: 'method',
          customRender: scope => {
            return this.getDictText('encryptMethod', scope.row.method)
          }
        },
        { label: '备注', prop: 'remarks' },
        { label: '操作', width: 200, fixed: 'right',
          customRender: (scope) => {
            return [
              <el-button type='text' onClick={() => this.detailBtn(scope.row)}> 详情 </el-button>,
              <el-button type='text' onClick={() => this.updateBtn(scope.row)}> 修改 </el-button>,
              <el-button type='text' onClick={() => this.delBtn(scope.row)} class='text-del-btn'> 删除 </el-button>
            ]
          }
        }
      ],
      form: {},
      systemIdList: [],
      // 分页相关
      pagination: {
        pageNo: 1,
        pageSize: 10
      },
      // 表格选中数据
      multipleSelection: [],
      // 服务相关信息传递到子组件
      serviceManagerData: {}
    }
  },

  created () {
    this.getTableData()

    getSystemListApi()
      .then(({ code, data }) => {
        if (code === '00000') {
          this.systemIdList = data
        }
      })
  },

  methods: {
    // 表格选中数据
    handleSelectionChange (val) {
      this.multipleSelection = val.map(item => item.id)
    },

    // 获取表格数据
    getTableData () {
      this.loading = true
      encDecPage({
        pageNo: this.pagination.pageNo,
        pageSize: this.pagination.pageSize,
        ...this.form
      }).then(({ code, data }) => {
        if (code === '00000') {
          this.tableData = data.rows
          // this.pagination.totalPage = data.totalPage
          this.pagination.totalPage = data.totalRows
        }
      }).finally(() => {
        this.loading = false
      })
    },

    // 修改按钮
    updateBtn (row) {
      encDecDetail({ id: row.id }).then(res => {
        if (res.code === '00000') {
          this.$refs.addEncPtiRef.dialogVisible = true
          this.$refs.addEncPtiRef.form = res.data
        }
      })
    },

    // 详情按钮
    detailBtn (row) {
      encDecDetail({ id: row.id }).then(res => {
        if (res.code === '00000') {
          this.$refs.addEncPtiRef.dialogVisible = true
          this.$refs.addEncPtiRef.disabled = true
          this.$refs.addEncPtiRef.form = res.data
        }
      })
    },

    // 删除按钮
    delBtn (row) {
      this.$confirm('确定删除加解密配置？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        EAndDDeleteApi({
          ids: this.multipleSelection.length > 0 ? this.multipleSelection : [row.id]
        }).then(({ code, data }) => {
          if (code === '00000') {
            this.$message.success('删除成功')
            this.dialogVisible = false
            this.getTableData()
          }
        })
      })
    },

    EAndDBtn (row) {
      this.$refs.addEncPtiRef.form = {
        systemId: null,
        encryptDecryptName: null,
        encryptType: null,
        method: null,
        publicKey: null,
        privateKey: null,
        remarks: null
      }
      this.$refs.addEncPtiRef.dialogVisible = true
    },

    // 搜索按钮
    searchBtn () {
      if (this.showTreeView) this.getTreeTableData()
      else this.getTableData()
    },

    // 重置按钮
    resetBtn () {
      this.$refs.form.resetFields()
      this.searchBtn()
    },

    // 分页操作
    handleSizeChange (val) {
      this.pagination.pageSize = val
      this.getTableData()
    },
    handleCurrentChange (val) {
      this.pagination.pageNo = val
      this.getTableData()
    }
  }
}
</script>

<style lang="scss" scoped>
.request-party-service-manage {
  background: #F2F2F2;

  &-body {
    background: #fff;
    margin-top: 10px;
    padding: 20px;
    height: calc(100vh - 254px);
    overflow-y: auto;
  }
  .el-pagination {
    text-align: right;
    margin-top: 20px;
  }

  .el-tree {
    ::v-deep .el-tree-node__expand-icon {
      font-size: 18px;
    }
    .custom-tree-node {
      width: calc(100% - 30px);
      display: flex;
      align-items: center;
      padding-right: 20px;

      > span:first-child {
        display: inline-block;
        width: calc(100% - 50px);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        line-height: 40px;
      }

      .tree-btn {
        .el-switch {
          margin-top: -4px;
          margin-left: 10px;
        }
      }
    }
  }
}
</style>
